<template>
  <div class="table_container">
    <el-row class="mb-4">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary" @click="addBatch(100)">百行数据</el-button>
      <el-button type="primary" @click="addBatch(1000)">千行数据</el-button>
      <el-button type="primary" @click="addBatch(10000)">万行数据</el-button>
      <el-button type="danger" @click="delBatch">批量删除</el-button>
      <el-button type="danger" @click="delAll">全部删除</el-button>
    </el-row>
    <table-basic-component
      :max-height="750"
      :tableData="tableData"
      :tableColumns="tableColumns"
      :current-page="listQuery.page"
      :page-size="listQuery.pageSize"
      :total="tableData.length"
      pagination-align="center"
      header-cell-class-name="cus_header"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      @select="select"
    >
      <template #dz="row">
        <el-button type="danger" @click="delOne(row)">删除</el-button>
      </template>
    </table-basic-component>
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
      :destroy-on-close="true"
    >
      <form-basic-component
        :formItemPropsConfig="formItemPropsConfig"
        :rules="rules"
        @onSubmit="addUser"
      >
      </form-basic-component>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, unref } from "vue";
import type { TableColumns } from "types/components/table";
import TableBasicComponent from "@/components/table/TableBasicComponent.vue";
import type { FormRules } from "element-plus";
import type { FormItemPropsConfig } from "types/components/form";

import FormBasicComponent from "@/components/form/FormBasicComponent.vue";
const formItemPropsConfig: Array<FormItemPropsConfig> = [
  {
    vModel: "name",
    label: "姓名",
  },
];
const rules: FormRules = {
  name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
};
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
  done();
};
const listQuery = ref({
  page: 1,
  pageSize: 10,
});
type demo = {
  date: string;
  name: string;
  address: string;
};
const tableData = ref<Array<demo>>([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);
const tableColumns = ref<Array<TableColumns>>([
  {
    type: "selection",
    width: 100,
    align: "center",
  },
  {
    type: "index",
    label: "序号",
    width: "100",
    align: "center",
  },
  {
    prop: "name",
    label: "姓名",
    align: "center",
  },
  {
    slot: true,
    slotName: "dz",
    prop: "address",
    label: "操作",
    width: 300,
  },
]);
function delOne(row: any) {
  console.log("发生了点击事件：", row);
  tableData.value.splice(row.row.$index, 1);
}
function onPageChange(page: number) {
  listQuery.value.page = page;
}
function onPageSizeChange(pageSize: number) {
  listQuery.value.page = pageSize;
}
const selectAll = ref<Array<demo>>();
function select(selectList: demo[], row: demo) {
  selectAll.value = unref(selectList);
}
function add() {
  console.log("新增");
  dialogVisible.value = true;
}
function delBatch() {
  console.log("删除");
  if (selectAll.value?.length) {
    tableData.value = tableData.value.filter((item) => {
      return selectAll.value?.findIndex((i) => i.name === item.name) == -1;
    });
  }
}
function delAll() {
  tableData.value = [];
}
function addUser(user: demo) {
  tableData.value.push(user);
  dialogVisible.value = false;
}
function addBatch(len: number) {
  for (let i = 0; i < len; i++) {
    tableData.value.push({ name: Math.round(Math.random() * 10000) + "", date: "", address: "" });
  }
}
</script>
<style lang="scss" scoped>
.table_container {
  :deep(.cus_header) {
    font-weight: bold;
    color: pink;
  }
}
</style>
